<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '游客评价与反馈',
  },
}
</route>
<template>
  <view
    class="bg-white bgImg w-screen overflow-hidden min-h-100vh"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="tab_cont" @click="handleClickLeft">
      <wd-icon name="thin-arrow-left" size="18" color="#6B6B6B" />
    </view>
    <view v-show="isShow">
      <view class="formCont">
        <wd-form ref="form" :model="queryParams" class="pt-40rpx pb-30rpx">
          <wd-cell-group
            style="border-bottom-right-radius: 36rpx; border-bottom-left-radius: 36rpx"
          >
            <view class="p-30rpx pt-0 lh-loose" style="font-size: 30rpx; text-align: justify">
              <p class="pb-20rpx">亲爱的游客朋友：</p>
              <p>
                1、嘿呀！欢迎您来到这个能让您畅所欲言的“吐槽大会”或者“夸夸专场”！
                我们知道，您的旅行就像一场奇妙冒险，有惊喜，可能也有小意外。所以呢，不管您觉得这趟旅行是愉快还是不满，都快别憋着，通通倒给我们！
              </p>
              <p>
                2、请您对旅游整体满意度进行评价，然后在具体项目评价里尽情发挥。要是有那种让您乐开花或者气冒烟的特别经历，一定要详细讲讲，还能上传照片来“实锤”。
              </p>
              <p>
                3、别担心，您的隐私我们会保护好，您的反馈只会用来帮我们变得更棒，给您带来更优质的下一次旅行！
              </p>
              <p>
                4、感谢您这位“旅行侠士”抽出时间来“指点江山”，咱们后会有期，期待下次给您更棒的旅行体验！
              </p>
            </view>
          </wd-cell-group>
        </wd-form>
      </view>
      <view v-show="btnShow" class="footer fw-600" @click="goForm">前往评价</view>
    </view>
    <view v-show="!isShow">
      <view class="formCont" style="margin-top: 20rpx !important">
        <wd-form ref="form" :model="queryParams" class="pt-40rpx pb-30rpx">
          <wd-cell-group
            style="border-bottom-right-radius: 36rpx; border-bottom-left-radius: 36rpx"
          >
            <view class="inline-block mr-20rpx ml-30rpx" style="font-size: 28rpx">
              <span style="margin-left: -4rpx; color: #fa4350">*</span>
              整体评价
            </view>
            <view
              class="w-100% flex items-center mb-20rpx mt-10rpx"
              style="font-size: 24rpx; color: #888"
            >
              <view class="inline-block w-160rpx ml-30rpx">景点质量</view>
              <wd-rate v-model="queryParams.scenicSpotsQuality" />
            </view>
            <view class="w-100% flex items-center mb-20rpx" style="font-size: 24rpx; color: #888">
              <view class="inline-block w-160rpx ml-30rpx">服务态度</view>
              <wd-rate v-model="queryParams.serviceAttitude" />
            </view>
            <view class="w-100% flex items-center mb-20rpx" style="font-size: 24rpx; color: #888">
              <view class="inline-block w-160rpx ml-30rpx">餐饮水平</view>
              <wd-rate v-model="queryParams.cateringLevel" />
            </view>
            <view class="w-100% flex items-center mb-40rpx" style="font-size: 24rpx; color: #888">
              <view class="inline-block w-160rpx ml-30rpx">交通便利性</view>
              <wd-rate v-model="queryParams.transportationConvenience" />
            </view>
            <wd-textarea
              label="评价内容"
              label-width="100px"
              prop="evaluateContent"
              v-model="queryParams.evaluateContent"
              placeholder="您在本次旅游中最满意的体验是什么？您遇到了哪些问题或不满意的情况？"
            />
            <wd-cell title="图片上传" vertical>
              <wd-upload
                :file-list="queryParams.imgList"
                multiple
                name="file"
                image-mode="aspectFill"
                :action="actions"
                @change="handleFileChange"
                @success="handleChange"
                @remove="handleRemove"
                class="bg-#fff"
              ></wd-upload>
            </wd-cell>
            <wd-input
              label="姓名"
              label-width="100px"
              prop="name"
              v-model="queryParams.name"
              placeholder="请输入姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <wd-input
              label="联系方式"
              label-width="100px"
              prop="contact"
              v-model="queryParams.contact"
              placeholder="请输入联系方式"
              :rules="[
                { required: true, message: '请填写联系方式' },
                {
                  pattern:
                    /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
                  message: '请输入正确的手机号码',
                  trigger: 'blur',
                },
              ]"
            />
            <view style="font-size: 24rpx; color: #969696; text-align: center">
              ——感谢您的反馈！——
            </view>
          </wd-cell-group>
        </wd-form>
      </view>
      <view class="footer fw-600" @click="handleSubmit">提交</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import * as getApi from '../../service/TouristReview/index'
import { useToast, useMessage } from 'wot-design-uni'
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
const actions: string = baseurl.value + '/app-api/infra/file/business/upload'
const message = useMessage()
const toast = useToast()
const queryParams = reactive({
  scenicSpotsQuality: 5,
  serviceAttitude: 5,
  cateringLevel: 5,
  transportationConvenience: 5,
  evaluateContent: '',
  files: [],
  imgList: [],
  name: '',
  contact: '',
})
const isShow = ref(true)
const btnShow = ref(true)
const form = ref()
function handleRemove({ file }) {
  queryParams.imgList = queryParams.imgList.filter((item) => {
    return item.uid !== file.uid
  })
}
function handleClickLeft() {
  uni.navigateBack()
}
function handleChange({ file }) {
  const { response } = file
  const fileId = JSON.parse(response).data.id
  file.fileId = fileId
  queryParams.imgList.push(file)
}
function handleFileChange({ fileList }) {
  //   queryParams.fileList = fileList
}
const goForm = () => {
  isShow.value = false
}
const handleSubmit = () => {
  const arr = [...queryParams.imgList]
  queryParams.files = arr.map((item) => {
    return item.fileId
  })
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        try {
          message
            .confirm({
              title: '是否提交',
            })
            .then(() => {
              getApi
                .createTourist({
                  ...queryParams,
                  scenicSpotsQuality: queryParams.scenicSpotsQuality + '星',
                  serviceAttitude: queryParams.serviceAttitude + '星',
                  cateringLevel: queryParams.cateringLevel + '星',
                  transportationConvenience: queryParams.transportationConvenience + '星',
                })
                .then((res) => {
                  if (res.msg === '成功') {
                    toast.success('评价成功')
                    isShow.value = true
                    btnShow.value = false
                  } else {
                    toast.warning(res.msg)
                  }
                })
            })
            .catch(() => {
              toast.info('取消提交')
            })
        } catch (error) {
          console.log(error)
        }
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
onLoad(() => {})
</script>

<style scoped>
.bgImg {
  background: url('../../static//images//bgImg2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.formCont {
  margin: 40% 20rpx 20rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
}
.footer {
  bottom: 10rpx;
  height: 90rpx;
  margin: 20rpx;
  font-size: 32rpx;
  line-height: 90rpx;
  color: #fff;
  text-align: center;
  background-color: #1ebc41;
  border-radius: 100rpx;
}
::v-deep.wd-textarea__value {
  padding-right: 0 !important;
  margin-top: 6rpx !important;
  background: rgba(240, 240, 240) !important;
}
::v-deep.wd-input.is-cell,
::v-deep.wd-picker__cell,
::v-deep.wd-textarea.is-cell {
  display: block !important;
  padding-top: 0rpx !important;
  padding-bottom: 40rpx !important;
}
::v-deep.wd-input__body,
::v-deep.wd-picker__body {
  height: 80rpx !important;
  line-height: 80rpx !important;
  background: rgba(240, 240, 240) !important;
}
::v-deep.wd-input.is-cell .wd-input__inner {
  height: 80rpx;
  line-height: 80rpx;
}
::v-deep.wd-picker__arrow {
  line-height: 80rpx !important;
}
::v-deep.uni-textarea-textarea,
::v-deep.uni-textarea-placeholder {
  line-height: 40rpx !important;
}
::v-deep.uni-textarea-placeholder .uni-textarea-placeholder {
  line-height: 80rpx !important;
}
::v-deep.wd-picker__label,
::v-deep.wd-textarea__label,
::v-deep.wd-textarea__label-inner,
::v-deep.wd-cell__title,
::v-deep.wd-input__label-inner {
  width: 100% !important;
  max-width: 100% !important;
  font-size: 28rpx !important;
}
.tab_cont {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  z-index: 999;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.57);
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 50px;
}
</style>
